<template>
    <a-layout class="layout h-full w-full" :class="[`al-layout-theme-${theme}`]">
        <a-layout-header
            :style="{
                backgroundColor: theme === 'dark' ? '#001529' : '#FFF',
                color: theme === 'dark' ? '#FFF' : 'rgba(0,0,0,0.85)',
                position: 'fixed',
                zIndex: 1,
                width: '100%'
            }"
        >
            <div class="h-full w-full flex flex-row justify-between">
                <top-menu />
                <div class="h-full flex flex-row justify-between items-center gap-x-4">
                    <user-info />
                </div>
            </div>
        </a-layout-header>
        <a-layout-content :style="{ marginTop: '64px' }">
            <div class="w-full h-full p0" style="overflow: auto">
                <router-view v-slot="{ Component }">
                    <transition name="fade">
                        <component :is="Component" />
                    </transition>
                </router-view>
            </div>
        </a-layout-content>
        <a-layout-footer
            v-if="LayoutConfig.footerDisplay"
            style="padding: 0; height: 32px; line-height: 32px; text-align: center"
        >
            {{ LayoutConfig.footerSettings }}
        </a-layout-footer>
    </a-layout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import UserInfo from './components/UserInfo.vue'
import TopMenu from './components/TopMenu.vue'

import LayoutConfig from '@/layouts/layoutConfig.json'

const theme = computed(() => {
    if (LayoutConfig.themeSettings === 'CUSTOM') {
        return 'custom'
    } else if (LayoutConfig.themeSettings === 'DARK_COLOR') {
        return 'dark'
    } else {
        return 'light'
    }
})
</script>
